<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板指令</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .red {
            color: red;
        }
        #red {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--
            v-if指令：如果条件满足(其中的值为true)，则显示当前标签，否则不显示
            一些特殊的Vue指令也可以指定参数，如：v-bind和v-on，对于可以添加参数的指令，参数和指令使用冒号进行分隔
            v-bind:style
            v-on:click

            条件渲染：
            有两种条件渲染的指令：v-if和v-show
            v-if: 设置一个javascript变量或表达式，当变量或表达式为真时其指定的元素才会被渲染
                配合v-if的还有v-else，它就是在v-if不成立的时候会渲染元素
                v-else-if，这个可以配合v-if使用，当v-if不成立时，会尝试匹配v-else-if，如果匹配成功，则渲染元素
        -->
        <h1 v-if="show">标题</h1>
        <p v-else>如果不显示标题则显示这里的段落</p>
        <!--
            [prop]：表示动态属性名，这个来源于响应式数据
            name：来源于响应式数据
            对于v-bind:我们可以简写为一个:
            比如：v-bind:[prop] 可以简写为:[prop]
        -->
        <h1 :[prop]="name">这里使用样式类型：{{prop}},样式名称：{{name}}</h1>
        <!--
            在指令后还可以加上修饰符，有如下一些：
                .trim：去除输入框中的空格
                .number：将输入的值转为数字类型
                .lazy：失去焦点时才更新数据
        -->
        <input type="text" v-model="content">
        <h1>输入内容："{{content}}"</h1>
        <!--
            v-on：用于绑定事件
            它可以简写为:@
            比如：v-on:click 可以简写为 @click
        -->
        <button v-on:click="click">点击</button>
    </div>

<script>
    const {createApp,ref} = Vue
    const config = {
        setup() {
            const show = ref(true)
            const prop = ref('class')
            const name = ref('red')
            const content = ref('')

            const click = function() {
                show.value = !show.value
            }
            return { show,prop,name,content }
        }
    }
    const app = createApp(config)
    app.mount('#app')
</script>
</body>
</html>